<section>
  <label id="lineWrapping-label" i18n="+cm_lineWrapping">
    <input id="editor.lineWrapping" type="checkbox">
  </label>
  <label id="smartIndent-label" i18n="+cm_smartIndent">
    <input id="editor.smartIndent" type="checkbox">
  </label>
  <label id="indentWithTabs-label" i18n="+cm_indentWithTabs">
    <input id="editor.indentWithTabs" type="checkbox">
  </label>
  <label i18n="+cm_autoCloseBrackets, title:cm_autoCloseBracketsTooltip">
    <input id="editor.autoCloseBrackets" type="checkbox">
  </label>
  <label i18n="+cm_autocompleteOnTyping">
    <input id="editor.autocompleteOnTyping" type="checkbox">
  </label>
  <label i18n="+cm_selectByTokens, title:cm_selectByTokensTooltip">
    <input id="editor.selectByTokens" type="checkbox">
  </label>
  <label i18n="+cm_arrowKeysTraverse" class="sectioned-only">
    <input id="editor.arrowKeysTraverse" type="checkbox">
  </label>
  <div>
    <label i18n="+cm_colorpicker">
      <input id="editor.colorpicker" type="checkbox">
    </label>
    <a id="colorpicker-settings" class=icon i18n="title:shortcutsNote" tabindex="0">
      <i class=i-config></i>
    </a>
  </div>
  <label i18n="+appliesLineWidgetLabel, title:appliesLineWidgetWarning" class="usercss-only">
    <input id="editor.appliesToLineWidget" type="checkbox">
  </label>
  <label i18n="+editTargetsFirst" class="sectioned-only">
    <input id="editor.targetsFirst" type="checkbox">
  </label>
</section>
<section class="aligned">
  <div>
    <label id="tabSize-label" for="editor.tabSize" i18n="cm_tabSize"></label>
    <input id="editor.tabSize" type="number" min="0">
  </div>
  <div>
    <label id="keyMap-label" for="editor.keyMap" i18n="cm_keyMap"></label>
    <div class="select-wrapper">
      <select id="editor.keyMap"></select>
    </div>
    <a id="keyMap-help" class=icon tabindex="0">
      <i class=i-info></i>
    </a>
  </div>
  <div>
    <label id="theme-label" for="editor.theme" i18n="cm_theme"></label>
    <div class="select-wrapper">
      <select id="editor.theme"></select>
    </div>
  </div>
  <div>
    <label id="highlight-label" for="editor.matchHighlight" i18n="cm_matchHighlight"></label>
    <div class="select-wrapper">
      <select id="editor.matchHighlight">
        <option i18n="cm_matchHighlightToken" value="token">
        <option i18n="cm_matchHighlightSelection" value="selection">
        <option i18n="genericDisabledLabel" value="">
      </select>
    </div>
  </div>
  <div>
    <label id="linter-label" for="editor.linter" i18n="cm_linter"></label>
    <div class="select-wrapper">
      <select id="editor.linter">
        <option value="csslint" selected>CSSLint</option>
        <option value="stylelint">Stylelint</option>
        <option value="" i18n="genericDisabledLabel"></option>
      </select>
    </div>
    <a id="linter-settings" class=icon i18n="title:linterConfigTooltip" tabindex="0">
      <i class=i-config></i>
    </a>
  </div>
</section>
